import { useSelector, useDispatch } from 'react-redux'
import { Input, Button, Space } from 'antd'

const View = () => {
  //获取仓库数据
  const { num } = useSelector((state: RootState) => ({
    num: state.NumStatus.num
  }))

  //修改仓库数据
  const dispatch = useDispatch()

  //加的方法
  const handleIncrement = () => {
    //同步的写法
    dispatch({ type: 'increment' })
  }

  const handleDecrement = () => {
    dispatch({ type: 'decrement' })
  }

  const handleAsyncIncrement = () => {
    dispatch((dispatch: Function) => {
      setTimeout(() => {
        dispatch({ type: 'increment' })
      }, 1000)
    })
  }

  return (
    <div className='home'>
      <p>Page1页面内容</p>
      <Space align='center'>
        <Button type='primary' onClick={handleIncrement}>
          增加
        </Button>
        <Input style={{ width: '80px', textAlign: 'center' }} value={num} />
        <Button type='primary' onClick={handleDecrement}>
          减少
        </Button>
        <Button type='primary' onClick={handleAsyncIncrement}>
          异步增加
        </Button>
      </Space>
    </div>
  )
}

export default View
